'use strict';

// sfx-collection.js — 读取 ?cat= 参数并渲染类目头图 & 预设筛选
(function(){
  const $ = (s,root=document)=>root.querySelector(s);
  const params = new URLSearchParams(location.search);
  const raw = params.get('cat') || 'ambience';
  const cat = decodeURIComponent(raw).toLowerCase();

  // 与首页分类保持一致（用于背景色 + 图标）
  const CATS = [
    {id:'swooshes',  name:'Swooshes',  desc:'快速划过、呼啸掠过',       bg:'#f6d3d1', fg:'#9cd0ff', icon:'lines'},
    {id:'ambience',  name:'Ambience',  desc:'环境氛围、自然声场',       bg:'#ff8c20', fg:'#8fb5ff', icon:'bars'},
    {id:'water',     name:'Water',     desc:'水滴、水花、流动',         bg:'#c7c6b4', fg:'#7cc5ff', icon:'maze'},
    {id:'vehicles',  name:'Vehicles',  desc:'车船飞机、引擎机械',        bg:'#ff5c3b', fg:'#c8c3ae', icon:'car'},
    {id:'whoosh',    name:'Whoosh',    desc:'疾风掠过、穿梭起落',        bg:'#f6d3d1', fg:'#9cd0ff', icon:'lines'},
    {id:'cartoon',   name:'Cartoon',   desc:'卡通夸张、弹跳滑稽',        bg:'#74a1ff', fg:'#cfead8', icon:'smile'},
    {id:'ui',        name:'User Interface', desc:'点击、弹窗、过渡',     bg:'#f6d3d1', fg:'#7aa9ff', icon:'hand'},
    {id:'riser',     name:'Riser',     desc:'上扬铺垫、紧张氛围',        bg:'#ff5c3b', fg:'#dcd4a6', icon:'film'},
    {id:'computers', name:'Computers', desc:'科技数码、电子合成',        bg:'#74a1ff', fg:'#d5ff7c', icon:'chip'},
    {id:'objects',   name:'Objects',   desc:'日常器物、开合敲击',        bg:'#e6ff7a', fg:'#c0b9e6', icon:'blocks'}
  ];
  const catInfo = CATS.find(c=>c.id===cat || c.name.toLowerCase()===cat) || CATS[0];

  // 将分类预设传递给 sfx.js（它会做过滤）
  window.__SFX_PRESET__ = Object.assign({}, window.__SFX_PRESET__||{}, { cat: cat });

  // 渲染头图
  document.title = `【${catInfo.name}】音效歌单 · Ruotong Music`;
  const hero = $('#hero');
  hero.style.setProperty('--hero-bg', catInfo.bg);
  hero.style.setProperty('--hero-fg', '#0b1220');
  $('#hero-title').textContent = catInfo.name;
  $('#hero-desc').textContent = catInfo.desc;
  $('#hero-art').innerHTML = `<svg aria-hidden="true" viewBox="0 0 64 64"><use href="assets/cats.svg#${catInfo.icon}"/></svg>`;

  // 交互：toolbar 的 chips 仅做 UI 态（核心筛选交给 sfx.js 中已有的 q + cat + sort + 时长字段）

  function setDurationFromChip(val){
    const dmin = document.querySelector('#sfx-dmin');
    const dmax = document.querySelector('#sfx-dmax');
    if(!dmin || !dmax) return;
    if(val==='0-3'){ dmin.value=0; dmax.value=3; }
    else if(val==='3-5'){ dmin.value=3; dmax.value=5; }
    else if(val==='5+'){ dmin.value=5; dmax.value=10; }
    else { dmin.value=0; dmax.value=10; }
    dmin.dispatchEvent(new Event('input')); dmax.dispatchEvent(new Event('input'));
    dmax.dispatchEvent(new Event('change'));
  }

  const chips = document.querySelectorAll('.sfx-col-toolbar .chip');
  chips.forEach(chip=>{
    chip.addEventListener('click', ()=>{
      const group = Array.from(chip.parentElement.querySelectorAll('.chip'));
      group.forEach(c=>c.setAttribute('aria-pressed','false'));
      chip.setAttribute('aria-pressed','true');
      // 仅演示：如果是时长选择，透传到 sfx.js 的选择器
      const dur = chip.dataset.dur; if(dur){ setDurationFromChip(dur); }
    });
  });

  // 排序透传
  const sort = document.querySelector('#sfx-sort-ui');
  sort?.addEventListener('change', ()=>{
    const sel = document.querySelector('#sfx-sort-main');
    if(sel){ sel.value = sort.value; sel.dispatchEvent(new Event('change')); }
  });

  // 初始化：把主筛选条隐藏的控件渲染到 toolbar（为了能和现有 sfx.js 协同）
  // 这里选择把 sfx.js 中的 #sfx-list 作为目标容器，其他逻辑保持不变。
})();
